<template>
	<image src="../../static/image/02.png" mode="widthFix" class="bg"></image>
	<u-navbar
	title="下单"
	:autoBack="true"
	:background="{
	background:'transparent'
	}"
	:border-bottom="false"
	titleSize="28rpx" titleColor="#fff"
	back-icon-color="#fff"
	:isFixed="false"
	/>
	
	<view class="container">
		<view class="content bgf pl30 pr30 r20">
			<view class="li t-flex between pt30 pb30">
				<view class="f30 c3 bold">项目名称</view>
				<view class="right t-flex">
					<view class="nowrap">
						{{form.goods_name || '未选择项目'}}
					</view>
<!-- 					<text class="iconfont icon-xiangyou1 ml10"></text> -->
				</view>
			</view>
			<view class="li t-flex between pt30 pb30">
				<view class="f30 c3 bold">姓名</view>
				<input type="text" placeholder="请输入" class="right" v-model="form.username" />
			</view>
			<view class="li t-flex between pt30 pb30">
				<view class="f30 c3 bold">电话</view>
				<input type="number" placeholder="请输入" class="right" v-model="form.phone" maxlength="11" />
			</view>
			<view class="li t-flex between pt30 pb30">
				<view class="f30 c3 bold">陪练车型</view>
				<view class="right t-flex">
					<u-radio-group v-model="form.car_type_id">
						<u-radio :name="item.id+''" active-color="#E40417"
						v-for="item in carType.list"
						:key="item.id"
						>{{item.name}}</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="li t-flex between pt30 pb30">
				<view class="f30 c3 bold">动力车型</view>
				<view class="right t-flex">
					<u-radio-group v-model="form.car_type_dl_id">
						<u-radio :name="item.id+''" active-color="#E40417"
						v-for="item in power.list"
						:key="item.id"
						> <text >{{item.name}}</text></u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="li t-flex between pt30 pb30">
				<view class="f30 c3 bold">车辆准备</view>
				<view class="right t-flex">
					<u-radio-group v-model="form.car_pre">
						<u-radio name="0" active-color="#E40417">用户准备</u-radio>
						<u-radio name="1" active-color="#E40417">师傅准备</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
		
		<view class="content bgf pl30 pr30 r20 mt20">
			<view class="li t-flex between pt30 pb30">
				<view class="f30 c3 bold">上门地点</view>
				<view class="right t-flex " @click="chooseAddress">
					<view :class="form.address?'c3':'c9'" class="nowrap">
						{{form.address || '请选择'}}
					</view>
					<text class="iconfont icon-dingwei ml10"></text>
				</view>
			</view>
			<!-- <view class="li t-flex between pt30 pb30">
				<view class="f30 c3 bold">是否购买保险 <text class="prc" v-if="form.is_buy_bx == 1">￥{{goods.data.bx_price}}</text></view>
				<view class="right2 t-flex">
					<u-radio-group v-model="form.is_buy_bx">
						<u-radio name="1" active-color="#E40417">是</u-radio>
						<u-radio name="0" active-color="#E40417">否</u-radio>
					</u-radio-group>
				</view>
			</view> -->
			<view class="li t-flex between pt30 pb30">
				<view class="f30 c3 bold">选择陪练师傅</view>
				<view class="right t-flex"  @click="chooseWorker">
					<view :class="form.sf_user_id?'c3':'c9'">
						{{form.sf_user_id?form.sf_user_id.name:'请选择'}}
					</view>
					<text class="iconfont icon-sanjiaoxia ml10 c9"></text>
				</view>
			</view>
			<view class="li t-flex between pt30 pb30">
				<view class="f30 c3 bold">特殊备注</view>
				<input type="text" placeholder="请输入" class="right" v-model="form.remark" />
			</view>
		</view>
		
		<view class="content bgf pl30 pr30 r20 mt20">
			<view class="li t-flex between pt30 pb30" @click="couponSelectE.open(form.user_coupon_id)">
				<view class="f30 c3 bold">优惠券</view>
				<view class="right t-flex">
					<view class="prc" v-if="form.user_coupon_id">
						{{couponSelectE.canUse.find(item=>item.id == form.user_coupon_id).coupon_name}}
					</view>
					<view class="c9" v-else>
						当前有 <text class="prc">{{canUseCoupon.length}}</text> 张可用
					</view>
					<text class="iconfont icon-xiangyou1 ml10"></text>
				</view>
			</view>
		</view>
		
		<view class="rule t-flex center mt20">
			<u-checkbox 
				v-model="rulereaded" 
				active-color="#E40417"
				shape="circle"
			></u-checkbox>
			<view class="mainC f24" @click="$go('/pages/public/onePage?key=price_agree')"
			style="height: 42rpx;line-height: 42rpx;margin-top: 4rpx;margin-left: -26rpx;"
			>
				《用户学车协议》
			</view>
		</view>
		<view class="bpad"></view>
		
		
		
		<view class="bottom t-flex center safeArea bgf">
			<view class="boxcontent t-flex between">
				<view class="">
					<text class="f24 c9 mr10">{{form.is_buy_bx?'保险+':''}}项目共计</text>
					<!-- <text class="prc f32 bold">￥</text> -->
<!-- 					<numberBox v-model="total" color="#FF1616" fontSize="32rpx" :fontWeight="600" /> -->
					<text class="prc f32 bold ml10">￥{{total}}</text>
				</view>
				<view class="confirm t-flex center f30 cf" @click="submit">下单</view>
			</view>
			
		</view>
	</view>
	
	<couponSelect ref="couponSelectE" :goods="form.good_id" :full="goods.data.price"
	@confirm="couponConfirm"
	></couponSelect>
</template>

<script setup lang="ts">
import numberBox from "../../components/animation/scrollNumber.vue"
import { computed, nextTick, reactive, ref, watch } from 'vue';
import { onLoad,onUnload } from "@dcloudio/uni-app"
import { createOrder, getCarType, getPowerType, goodsDetail,osZl,payOrder } from '../../api';
import { showToast } from '../../lib/ts/util';
import { useStore } from "../../store";
	
	const couponSelectE = ref()
	const store = useStore()
	
	onLoad(options=>{
		form.good_id = options.id
		form.goods_name = options.name
		form.phone = store.userinfo.mobile
		goods.init(options.id)
	})
	onUnload(()=>{
		uni.$off('chooseWorker')
	})

	
	let form = reactive({
		good_id:'',
		goods_name:'',
		username:'',
		phone:'',
		car_type_id:'',
		car_type_dl_id:'',
		car_pre:'0',
		address:'',
		is_buy_bx:'1',
		sf_user_id:'',
		user_coupon_id:'',
		remark:'',
	})
	
	let rulereaded = ref(false)
	
	
	//项目详情
	let goods = reactive({
		data:{},
		async init(id:number){
			goods.data = await goodsDetail(id)
		}
	})
	
	
	//车辆类型
	let carType = reactive({
		list:[],
		async init(){
			let res = await getCarType()
			if(res){
				carType.list = res
				form.car_type_id = res[0].id+''
			}
		}
	})
	
	//动力车型
	let power =  reactive({
		list:[],
		async init(){
			let res = await getPowerType()
			if(res){
				power.list =  [{name:'不限',id:0},...res]
				form.car_type_dl_id = '0'
			}
		}
	})
	carType.init()
	power.init()
	
	//选择地址
	const chooseAddress = ()=>{
		uni.chooseLocation({
			success(e) {
				form.address = e.address
			}
		})
	}
	
	//选择陪练师傅
	const chooseWorker = ()=>{
		if(!form.car_type_id) return showToast('请先选择陪练车型')
		if(!form.car_type_dl_id) return showToast('请先选择动力类型')
		uni.navigateTo({
			url:`/pages/worker/list?car_type_id=${form.car_type_id}&car_type_dl_id=${form.car_type_dl_id}`
		})
	}
	uni.$on('chooseWorker',(e)=>{
		console.log(e,'?')
		form.sf_user_id = e		
	})
	watch([
		()=>form.car_type_id,
		()=>form.car_type_dl_id
	],()=>{
		form.sf_user_id = ''
	})
	
	
	//可选优惠券
	let canUseCoupon = computed(()=>{
		if(couponSelectE.value){
			return couponSelectE.value.canUse
		}else{
			return []
		}
	})
	//观察项目变化时更新可用优惠券
	watch(()=>goods.data,()=>{
		nextTick(()=>{
			couponSelectE.value.data.init()
			form.user_coupon_id = ''
		})
	})
	//选择优惠券
	const couponConfirm = (e)=>{
		form.user_coupon_id = e
	}
	
	//订单总价
	let total = computed(()=>{
		let num = +goods.data.price
		if(form.user_coupon_id){
			let target = couponSelectE.value.canUse.find(item=>item.id == form.user_coupon_id)
			if(target.coupon_type==1){
				num*=(+target.discount/10)
			}else{
				num-=+target.minus_price
			}
		}
		if(form.is_buy_bx == '1') num+=+goods.data.bx_price
		num = Math.max(0,num)
		return num.toFixed(2)
	})
	
	
	
	const submit = async ()=>{
		if(!rulereaded.value) return showToast('请先阅读并勾选《用户学车协议》')
		if(!form.username) return showToast('请输入姓名')
		if(!form.phone) return showToast('请输入电话')
		if(!form.address) return showToast('请选择上门地点')
		
	
		let formdata = JSON.parse(JSON.stringify(form))
		formdata.sf_user_id = formdata.sf_user_id.user_id || ''
		
		let res = await createOrder({...formdata,area_id:store.area_id})
		let res2 = await osZl()
		let config = res2.find(item=> res.data.orderInfo.type == item.type) 
		if(!config.is_show_switch){
			let paydata = await payOrder(res.data.orderInfo.id)
			store.pay(paydata,'wechat').then(()=>{
				 uni.redirectTo({
				 	url:'/pages/public/paySuccess?id='+res.data.orderInfo.id
				 })
			}).catch(()=>{
				uni.redirectTo({
					url:'/pages/order/detail?id='+res.data.orderInfo.id
				})
			})
		}else{
			uni.redirectTo({
				url:'/pages/shareOrder/shareOrder?id='+res.data.orderInfo.id
			})
		}
	}
	

</script>

<style scoped lang="scss">
	.bg{
		width: 100%;
		position: absolute;
	}
	.container{
		padding: 40rpx 30rpx;
		position: relative;
		z-index: 2;
	}
	
	.li{
		border-bottom: 2rpx solid #F6F6F6;
		.right{
			width: 70%;
			justify-content: flex-end;
			text-align: right;
		}
		.right2{
			width: 50%;
			justify-content: flex-end;
		}
	}
	.prc{
		color: #FF1616;
	}
	.bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		.boxcontent{
			box-shadow: inset 0rpx 2rpx 0rpx 0rpx #EDEDED;
			width: 100vw;
			padding: 20rpx 30rpx;
			.confirm{
				width: 320rpx;
				height: 80rpx;
				background: $main-color;
				border-radius: 40rpx;
			}
		}
	}
	
	
</style>
